<?php include("includes/session.php"); ?>
<?php include("includes/connect_db.php"); ?>
<?php include("includes/header.php"); ?>
<?php include("notif.php"); ?>

<?php
	$id = $_GET['id'];
	$sql_group = "SELECT * FROM tb_group_kontak WHERE id_group = '$id'";
	$query_group = mysql_query($sql_group);
	$group = mysql_fetch_array($query_group);
?>

<style>
	div{
		font-family: 'SEGOE UI';
	}
	.border{
		border: 2px solid #08c;
	}
	#pilihKontak{
		width: 200px;
	}
	.btnPilihKontak{
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 3px solid #08c;
	}
	.kontakTampil{
		padding: 5px;
		background: #08c;
		border-radius: 3px;
		margin-bottom: 5px;
		min-height: 30px;
		color: #FFF;
	}
	.span8{
		border: 2px solid #000;
	}
	.border{
		border: 2px solid #08c;
		padding: 5px;
		margin-bottom: 10px;
	}
	.hapus{
		cursor: pointer;
	}
	.frame{
		margin-bottom: 5px;
		border: 2px solid #08c;
	}
	.marginDesc{
		margin-bottom: 5px;
	}
	.marginImg{
		margin-bottom: 5px;
	}
	.desc{
		margin: 35px 0px 10px;
		color: #FFF;
		background-color: #08c;
		padding: 10px;
		text-align: center;
		text-transform: uppercase;
	}
</style>

<div class="span9">  
    <h3>SMS</h3>
    <ul class="breadcrumb well">
    	<li><a href="kontak.php">Contact</a> <span class="divider">/</span></li>
        <li class="active">Tambah</li>                
    </ul>    
    <div class="alert alert-info">
		Tambah Kontak
    </div>
    
	<div>
		<div class="span12">
			<div class="span6">
				<div class="span12 border">
					<div class="img marginImg">
						<div class="frame">
							<img style="width: 100%;" src="<?php echo cekGambar($group['id_group'], 2, 1); ?>">
						</div>
						<div>
							<button name="Gambar" id="pilihGambar" class="btn btn-info">Pilih Gambar</button>
						</div>
					</div>
					<div class="desc">
						Deskripsi Group
					</div>
					<div class="marginDesc">Nama Group</div>
					<div>
						<input placeholder="Masukkan Nama" id='namaKontak' type="text" value="<?php echo $group['nama_group']; ?>" class="span12">
					</div>
					<div class="marginDesc">Deskripsi</div>
					<div>
						<textarea placeholder="Masukkan Deskripsi" class="span12" id='deskripsiKontak' value="" style="height: 50px; overflow: hidden; word-wrap: break-word; resize: none;"><?php echo $group['deskripsi'] ?></textarea>
					</div>
				</div>
				<div border>
					<div class="span12 border">
						<button style="width: 100px;" class="btn btn-info" id="simpan">Simpan</button>
						<button style="width: 100px;" class="btn btn-danger" id="batal">Batal</button>
					</div>
				</div>
			</div>
			<div class="span6 border">
				<div class="span12 btnPilihKontak">
					<button class="btn btn-info" id="pilihKontak">
						<i class="icon-white icon-user"></i>
						Pilih Kontak
					</button>
				</div>
				<div id="isianKontak" class="span12">
					<?php
						$sql_lihat = "SELECT * FROM tb_detail_kontak WHERE id_group = '$id'";
						$query_lihat = mysql_query($sql_lihat);
						while ($lihat = mysql_fetch_array($query_lihat)) {
							$sql = "SELECT * FROM tb_kontak_rincian WHERE id_kontak = '$lihat[id_kontak]' AND is_primary = 1";
							$query = mysql_query($sql);
							$baris = mysql_fetch_array($query);

							$tampil = $baris['nama_rincian']." (".$baris['no_hp'].")";
							$panjang = strlen($tampil);
							if ($panjang > 45) {
								$kontak = substr($tampil, 0, 45);
								$kontak .= " ...";
							} else {
								$kontak = $tampil;
							}
					?>

					<div class="kontakTampil" style="width: 90%" data-id="<?php echo $lihat['id_kontak']; ?>">
						<span class="span11">
							<?php echo $kontak; ?>
						</span>
						<span class="span1">
							<i class="icon-remove icon-white hapus"></i>
						</span>
					</div>

					<?php
						}
					?>
				</div>
				<input type="hidden" value="<?php echo $arrID; ?>">
			</div>
		</div>
		
	</div>
</div>

<?php
	
?>

<?php include("includes/footer.php"); ?>

<script type="text/javascript">
    var id = [<?php
				$i = 1;
				$sql_lihat = "SELECT * FROM tb_detail_kontak WHERE id_group = '$id'";
				$query_lihat = mysql_query($sql_lihat);
				$jumlah = mysql_num_rows($query_lihat);
				$query_lihat = mysql_query($sql_lihat);
				while ($lihat = mysql_fetch_array($query_lihat)) {
			?>
					'<?php echo $lihat[id_kontak] ?>'
					<?php	
						if ($i < $jumlah) {
							echo ",";
						};
						$i++;	
					}
				?>
			];

	$(document).ready(function() {
		$('#pilihKontak').click(function(){
			tempView = $(this);
	        $("#tampil-modal").fadeOut("medium",function(){
	        	if($('#tampil-modal').html()==""){
		            $.ajax({
		                url: "kontakGrup-modal.php", 
		                cache: false, 
		                success: function(kontak){ 
		                    $("#tampil-modal").html(kontak);
		                    $("#tampil-modal").fadeIn("medium");
		                    cekKontak();
		                    $('#form-modal').on('hidden', function(){
		                    	$.ajax({
		                    	  url: 'act_contact_group.php?act=1',
		                    	  type: 'POST',
		                    	  data: {id: id},
		                    	  complete: function(xhr, textStatus) {
		                    	    //called when complete
		                    	  },
		                    	  success: function(data, textStatus, xhr) {
		                    	    $('#isianKontak').html(data);
		                    	  },
		                    	  error: function(xhr, textStatus, errorThrown) {
		                    	    //called when there is an error
		                    	  }
		                    	});
		                    });
		                } 
		            }); 
	        	}else{
	        		$('#form-modal').modal('show');
		            cekKontak();
	        	}
	        });
	        return false;
		});
		
		$('.hapus').live("click", function(){
			var idHapus = $(this).closest("div").data("id").toString();
			var indexHapus = id.indexOf(idHapus);
			id.splice(indexHapus, 1);
			$(this).closest("div").remove();
		});

		$('.hapus').live({
			mouseenter:
			   function()
			   {
					$(this).closest('div').css('background-color', '#06c');
			   },
			mouseleave:
			   function()
			   {
					$(this).closest('div').css('background-color', '#08c');		
			   }
		   }
		);

		$('#simpan').click(function(){
			if (($('#namaKontak').val() == "") || ($('#deskripsiKontak').val() == "")) {
				console.log("belum isi");
			} else {
				var kontakGrup = {
					nama : $('#namaKontak').val(),
					deskripsi : $('#deskripsiKontak').val(),
					id: id,
					idGroup: <?php echo $id; ?> 
				};

				$.ajax({
				  url: 'act_contact_group.php?act=4',
				  type: 'POST',
				  data: kontakGrup,
				  success: function(data, textStatus, xhr) {
				    alert('data berhasil disimpan.');
				    window.location = ('kontak.php');
				  }
				});
				
			};
		});
	});

	$('#batal').click(function(){
		window.location = ('kontak.php');
	});

	$('#pilihGambar').click(function(){
		var formProfil = {
			id: <?php echo $_GET["id"]; ?>,
			tipe: 2
		};
		$.ajax({
			url: 'modal-profil.php',
			type: 'POST',
			data: formProfil,
			complete: function(xhr, textStatus) {
			  //called when complete
			},
			success: function(data, textStatus, xhr) {
			  $('#tampil-modal').html(data);
			},
			error: function(xhr, textStatus, errorThrown) {
			  //called when there is an error
			}
		});
		return false;
    });
</script>